<%--
  Created by IntelliJ IDEA.
  User: 86132
  Date: 2023/9/26
  Time: 17:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
    <%--引入vue的js--%>
    <script src="../../js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../js/index.js"></script>
    <!--引入axios的依赖-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- import CSS -->
    <link rel="stylesheet" href="../../css/index.css">
</head>
<body>
<div id="app">
    <%--    搜索框--%>
    <el-form :inline="true" :model="goodsSearchForm" class="demo-form-inline">
        <el-form-item>
            <el-input v-model="goodsSearchForm.goodsname" placeholder="键盘名" ></el-input>
        </el-form-item>
        <el-form-item>
            <el-select v-model="goodsSearchForm.keycapid" placeholder="-请选择键帽类型-" >
                <el-option label="-请选择键帽类型-" value="null"></el-option>
                <el-option v-for="k in keycaps" :label="k.keycapname" :value="k.keycapid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select v-model="goodsSearchForm.keyboardcolorid" placeholder="-请选择键盘颜色-" >
                <el-option label="-请选择键盘颜色-" value="null"></el-option>
                <el-option v-for="k in keyboardcolors" :label="k.keyboardcolorname"
                           :value="k.keyboardcolorid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select v-model="goodsSearchForm.shaftchooseid" placeholder="-请选择轴体类型-">
                <el-option label="-请选择轴体类型-" value="null"></el-option>
                <el-option v-for="s in shaftchooses" :label="s.shaftchoose" :value="s.shaftchooseid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select v-model="goodsSearchForm.backlightcolorid" placeholder="-请选择背光颜色-" >
                <el-option label="-请选择背光颜色-" value="null"></el-option>
                <el-option v-for="b in backlightcolors" :label="b.backlightcolorname"
                           :value="b.backlightcolorid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select v-model="goodsSearchForm.branchid" placeholder="-请选择分店-">
                <el-option label="-请选择分店-" value="null"></el-option>
                <el-option v-for="b in branchs" :label="b.branchname" :value="b.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button icon="el-icon-search" circle @click="searchGoods(1)"></el-button>
        </el-form-item>
    </el-form>


    <%--    刷新按钮--%>
    <el-button type="success" @click="inittable" size="small">刷新</el-button>

    <%--    新增按钮--%>
    <el-button type="success" @click="addGoods" size="small">新增</el-button>
    <%--    主表格--%>
    <el-table
            :data="tableDate"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
        <el-table-column
                type="selection"
        >
        </el-table-column>
        <el-table-column
                label="商品图片"
                width="100"
        >
            <template slot-scope="scope">
                <img :src="scope.row.url" alt="" width="80px" height="45px">
            </template>
        </el-table-column>
        <el-table-column
                prop="goodsname"
                label="商品名称"
                width="140"
        >
        </el-table-column>
        <el-table-column
                prop="layout"
                label="键盘布局"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="keycapname"
                label="键帽材质"
                width="120"
        >
        </el-table-column>
        <el-table-column
                prop="keyboardcolorname"
                label="键盘颜色"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="shafttype"
                label="轴体类型"
                width="120"
        >
        </el-table-column>
        <el-table-column
                prop="shaftchoose"
                label="轴体选择"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="interfacetype"
                label="接口类型"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="backlightcolorname"
                label="背光颜色"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="cprice"
                label="商品进价"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="sprice"
                label="商品售价"
                width="100"
        >
        </el-table-column>
        <el-table-column
                prop="branchname"
                label="店铺名称"
                width="140"
        >
        </el-table-column>
        <el-table-column
                prop="counts"
                label="商品数量"
                width="100"
        ></el-table-column>
        <el-table-column
                label="操作"
                width="120">
            <template slot-scope="scope">
                <el-button type="primary" icon="el-icon-edit" circle @click="upGoods(scope.row)"></el-button>
                <el-button type="danger" icon="el-icon-delete" circle @click="delGoods(scope.row)"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <%--    分页--%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 5, 10, 15]"
            :page-size=pageSize
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
    <!--        修改的对话框-->
    <el-dialog
            title="修改商品信息"
            :visible.sync="dialogVisible"
            width="30%"
    >
        <el-form ref="form" :model="editForm" label-width="80px">
            <el-form-item label="商品图片">
                <input type="file"  id="fileInput" style="display: none;">
                <el-button type="primary" @click="imageUpload" style="margin-top: 5px">上传图片</el-button>
                <br><br>
                <img :src="editForm.url" width="200px" height="150px">
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="editForm.goodsname"></el-input>
            </el-form-item>
            <el-form-item label="键盘布局">
                <el-input v-model="editForm.layout"></el-input>
            </el-form-item>
            <el-form-item label="键帽类型">
                <el-select v-model="editForm.keycapname" placeholder="-请选择键帽类型-" size="medium">
                    <el-option label="-请选择键帽类型-" value="null"></el-option>
                    <el-option v-for="k in keycaps" :label="k.keycapname" :value="k.keycapid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="键盘颜色">
                <el-select v-model="editForm.keyboardcolorname" placeholder="-请选择键盘颜色-" size="medium">
                    <el-option label="-请选择键盘颜色-" value="null"></el-option>
                    <el-option v-for="k in keyboardcolors" :label="k.keyboardcolorname"
                               :value="k.keyboardcolorid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="轴体类型">
                <el-select v-model="editForm.shaftchoose" placeholder="-请选择轴体类型-" size="medium">
                    <el-option label="-请选择轴体类型-" value="null"></el-option>
                    <el-option v-for="s in shaftchooses" :label="s.shaftchoose" :value="s.shaftchooseid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="接口类型">
                <el-input v-model="editForm.interfacetype"></el-input>
            </el-form-item>
            <el-form-item label="背光颜色">
                <el-select v-model="editForm.backlightcolorname" placeholder="-请选择背光颜色-" size="medium">
                    <el-option label="-请选择背光颜色-" value="null"></el-option>
                    <el-option v-for="b in backlightcolors" :label="b.backlightcolorname"
                               :value="b.backlightcolorid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品进阶">
                <el-input v-model="editForm.cprice"></el-input>
            </el-form-item>
            <el-form-item label="商品售价">
                <el-input v-model="editForm.sprice"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="confirmUpdate">确 定</el-button>
  </span>
    </el-dialog>

    <%--    增加的对话框--%>
    <el-dialog
            title="增加商品信息"
            :visible.sync="dialogVisible1"
            width="30%"
    >
        <el-form ref="form" :model="addForm" label-width="80px">
            <el-form-item label="商品图片">
                <input type="file"  id="fileInput1" style="display: none;">
                <el-button type="primary" @click="imageUploadAdd" style="margin-top: 5px">上传图片</el-button>
                <br><br>
                <img :src="addForm.url" width="200px" height="150px">
            </el-form-item>
            <el-form-item label="商品名称">
                <el-input v-model="addForm.goodsname" placeholder="请输入商品名称"></el-input>
            </el-form-item>
            <el-form-item label="键盘布局">
                <el-input v-model="addForm.layout" placeholder="请输入键盘布局"></el-input>
            </el-form-item>
            <el-form-item label="键帽材质">
                <el-select v-model="addForm.keycapid" placeholder="-请选择键帽材质-" size="medium">
                    <el-option v-for="k in keycaps" :label="k.keycapname" :value="k.keycapid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="键盘颜色">
                <el-select v-model="addForm.keyboardcolorid" placeholder="-请选择键盘颜色-" size="medium">
                    <el-option v-for="k in keyboardcolors" :label="k.keyboardcolorname"
                               :value="k.keyboardcolorid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="轴体选择">
                <el-select v-model="addForm.shaftchooseid" placeholder="-请选择轴体选择-" size="medium">
                    <el-option v-for="s in shaftchooses" :label="s.shaftchoose" :value="s.shaftchooseid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="轴体类型">
                <el-input v-model="addForm.shafttype" placeholder="请输入轴体类型"></el-input>
            </el-form-item>
            <el-form-item label="接口类型">
                <el-input v-model="addForm.interfacetype" placeholder="请输入接口类型"></el-input>
            </el-form-item>
            <el-form-item label="背光颜色">
                <el-select v-model="addForm.backlightcolorid" placeholder="-请选择背光颜色-" size="medium">
                    <el-option v-for="b in backlightcolors" :label="b.backlightcolorname"
                               :value="b.backlightcolorid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="商品进价">
                <el-input v-model="addForm.cprice" placeholder="请输入商品进价"></el-input>
            </el-form-item>
            <el-form-item label="商品售价">
                <el-input v-model="addForm.sprice" placeholder="请输入商品售价"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible1 = false">取 消</el-button>
    <el-button type="primary" @click="confirmAdd">确 定</el-button>
  </span>
    </el-dialog>
</div>


</body>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            tableDate: [],
            editForm: {url:''},
            dialogVisible: false,
            dialogVisible1: false,
            addForm: {url:''},
            //当前页码显示为1
            currentPage: 1,
            pageSize: 5,
            total: 1,
            keycaps: [],
            goodsSearchForm: {},
            keyboardcolors: [],
            shaftchooses: [],
            backlightcolors: [],
            branchs: [],
            branchid:'',
        },

        created() {
            //  初始化商品表格
            this.inittable()
            this.initkeycap()
            this.initkeyboradcolor()
            this.initshaftchoose()
            this.initbacklightcolor()
            this.initbranch()
        },
        methods: {
            //初始化表格
            inittable() {
                axios.post("/goods/selectbranchid").then(resp=>{
                    this.branchid = resp.data;
                    console.log(this.branchid)
                })
                axios.post("/goods/list?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.goodsSearchForm).then(resp => {
                    app.tableDate = resp.data.data.list
                    console.log(app.tableDate)
                    app.total = resp.data.data.total
                })
            },
            //初始化键帽类型
            initkeycap() {
                axios.get("/goods/keycap").then(resp => {
                    this.keycaps = resp.data.data
                })
            },
            //初始化键盘颜色
            initkeyboradcolor() {
                axios.get("/goods/keyboardcolorAll").then(resp => {
                    console.log(resp)
                    this.keyboardcolors = resp.data.data
                })
            },
            //初始化轴体类型
            initshaftchoose() {
                axios.get("/goods/shaftchoose?status=1").then(resp => {
                    this.shaftchooses = resp.data.data
                })
            },
            //初始化背光颜色
            initbacklightcolor() {
                axios.get("/goods/backlightcolor?status=1").then(resp => {
                    this.backlightcolors = resp.data.data
                })
            },
            //初始化分店
            initbranch() {
                axios.get("/goods/branch").then(resp => {
                    this.branchs = resp.data.data
                })
            },
            //搜索按钮
            searchGoods(status) {
                if (status===1){
                    this.currentPage = 1;
                }
                app.inittable();
            },
            handleClick(row) {
                console.log(row);
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //上传图片
            handleChange(file, fileList) {
                this.fileList = fileList.slice(-3);
                console.log(fileList)
            },
            handleChange1(file, fileList) {
                this.fileList = fileList.slice(-3);
                console.log(fileList)
            },
            //删除行
            delGoods(row) {
                console.log(row.branchid)
                if (row.branchid==this.branchid){
                    let id = row.goodsid;
                    this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        axios.get("/goods/delete?id=" + id).then(function (resp) {
                            var data = resp.data;
                            if (data === 1) {
                                app.$message({
                                    type: 'success',
                                    message: '删除成功!'
                                });
                                app.inittable()
                            }
                        })

                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        });
                    });

                }else {
                    this.$message({
                        type: 'info',
                        message: '没有该权限'
                    });
                }
            },
            //修改按钮事件
            upGoods(row) {
                let flag = false;
                console.log(row.branchid,"=======",this.branchid)
                if (row.branchid==this.branchid){
                    flag = true;
                }
                console.log(flag)
                if (flag){
                    console.log(row)
                    this.dialogVisible = true
                    this.editForm = row
                }else {
                    this.$message({
                        type: 'info',
                        message: '没有该权限'
                    });
                }
            },
            //修改按钮确定事件
            confirmUpdate() {
                console.log(this.editForm,"---------------------------")
                axios.post("/goods/update", this.editForm).then(function (resp) {
                    if (resp.data === 1) {
                        //    刷新页面
                        app.inittable();
                    }
                    app.dialogVisible = false;
                })
            },
            //增加按钮确定事件
            confirmAdd() {
                axios.post("/goods/add", this.addForm).then(function (resp) {
                    if (resp.data === 1) {
                        //    刷新页面
                        app.inittable();
                    }
                    app.dialogVisible1 = false;
                })

            },
            //    新增商品数据
            addGoods() {
                this.dialogVisible1 = true;
            },

            //    改变页面大小的函数
            handleSizeChange(val) {
                this.pageSize = val;
                this.inittable();
            },
            //    改变显示页码的函数
            handleCurrentChange(val) {
                this.currentPage = val;
                this.inittable();
            },
            imageUpload(){
                let fileInput = document.getElementById('fileInput');
                fileInput.click();
                document.getElementById('fileInput').addEventListener('input', function(event) {
                    let headUrl = event.target.files[0];
                    let formData=new FormData();
                    formData.append('headUrl',headUrl);
                    console.log(formData);
                    axios({
                        url: '/goods/upload',
                        method: 'post',
                        data: formData,
                        headers: { 'Content-Type': 'multipart/form-data' },
                    }).then(resp=>{
                        console.log(resp.data.data)
                        app.editForm.url = resp.data.data
                    })
                })
            },
            imageUploadAdd(){
                let fileInput1 = document.getElementById('fileInput1');
                fileInput1.click();
                document.getElementById('fileInput1').addEventListener('input', function(event) {
                    let headUrl = event.target.files[0];
                    let formData=new FormData();
                    formData.append('headUrl',headUrl);
                    console.log(formData);
                    axios({
                        url: '/goods/uploadadd',
                        method: 'post',
                        data: formData,
                        headers: { 'Content-Type': 'multipart/form-data' },
                    }).then(resp=>{
                        console.log(resp.data.data)
                        app.addForm.url = resp.data.data
                    })
                })
            }
        }
    })

</script>
</html>
